/*
 * @Author: xiaosihan 
 * @Date: 2023-08-10 11:24:00 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-01-09 01:09:00
 */

import designEditor from "@/editorComponent/designEditor";
import editorStore from "@/editorComponent/editorStore";
import { Tooltip } from "antd";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import maxSVG from "./max.svg";
import styles from "./toolTextColor.module.less";
import { SketchPicker } from "react-color";
import FabricText from "@/myFabric/FabricText";
import ColorPick from "../ColorPick/ColorPick";
import nameNumStore from "@/editorComponent/LeftMenu/NameNum/nameNumStore";

interface Iprops {
}

// 颜色工具
export default function TooTextlColor() {

  const showTop = useRef(false);
  const [visible, setVisible] = useState(false);
  const [color, setColor] = useState("#ffffff");
  const [disable, setDisable] = useState(false);

  useEffect(() => autorun(() => {
    const { activeObjectId, lock } = editorStore;
    const { step } = nameNumStore;
    const activeObject = designEditor.fabricCanvas.getActiveObject();
    if (activeObjectId && activeObject && activeObject.type === "i-text") {
      const { fill = "#000000" } = activeObject as FabricText;
      const lockNameNum = (["name", "num"].includes(activeObject.name || "") && step === 3);
      setDisable(lock || lockNameNum);
      setColor(fill as string);
      setVisible(true);
    } else {
      setVisible(false);
    }
  }), []);

  // 响应吸色器的颜色拾取
  useEffect(() => autorun(() => {
    const { pickerColor } = editorStore;
    // if (showTop.current) {
    // designEditor.setActiveFill(pickerColor);
    setColor(pickerColor);
    // }
  }, { delay: 1000 }), []);

  return (
    <Tooltip
      title={
        <div className={styles.color_picker} >
          <SketchPicker
            color={color}
            className={styles.SketchPicker}
            onChange={(color: any) => {
              designEditor.setActiveFill(color.hex);
              setColor(color.hex);
            }}
          />
          <ColorPick />
        </div>
      }
      onOpenChange={open => {
        showTop.current = open;
      }}
      trigger={['click']}
      color={"#00000000"}
      placement="bottom"
    >
      <div className={clsx(styles.toolTextColor, visible && styles.visible, disable && styles.disable)} >
        <span className={styles.colorBlock} style={{ backgroundColor: color }} ></span>
      </div>

    </Tooltip>
  );

}